<script lang="ts" setup>
import { defineEmits, getCurrentInstance, nextTick, ref } from "vue"
import ccInput from "./Input.vue"
import { onMounted } from "vue";


const emit = defineEmits(["reset", "search"])
interface Props {
  value?: boolean,
  formJson: any[],
  mini?: boolean,
  autoSearch?: boolean,
  needReset?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  value: false,
  mini: false,
  autoSearch: false,
  needReset: false,
})
const formRef = ref([]);
const proxy = getCurrentInstance()?.proxy;
// 重置参数
const reset = () => {
  formModal.value = getQueryParams(props.formJson)
  if ("zone" in formModal.value) {
    for (let i = 0; i < props.formJson.length; i++) {

      // refs 是个数组?
      // if (this.$refs["component" + i][0].setArea) {
      //   this.$refs["component" + i][0].setArea(["", "", ""])
      // }
    }
  }
  emit("reset")
  search()
}
const fold = () => {
  folding.value = !folding.value
  displayCount.value = displayCount.value === 100 ? 4 : 100
}
const search = (e?: any) => {
  emit("search", formModal.value)
}
const getQueryParams = (json: any) => {
  const obj: any = {}
  json.forEach((el: any) => {
    obj[el.filed] = el.default
  })
  return obj
}
const formModal = ref(getQueryParams(props.formJson))
const folding = ref(true)
const displayCount = ref(4)
const componentLoaded = ref(false)
console.log(formModal.value);
const coms: any = {
  input: ccInput,
  select: ccInput
}
onMounted(() => {
  nextTick(() => {
    componentLoaded.value = true
  })
})


const data = ref(props.value)
</script>

<template>
  <el-form inline size="small">
    <el-row>
      <div v-for="(item, index) in props.formJson">
        <el-form-item :label="item.label" :key="index" v-show="index < displayCount">
          <component :name="item.filed" :mini="mini" :ref="item.type" :is="coms[item.type]" :options="item.options"
                     :query="typeof item.query === 'function' ? item.query(formModal) : item.query"
                     :isNotInCommonForm="false" :clearable="item.clearable !== false" :placeholder="item.placeholder"
                     :startPlaceholder="item.startPlaceholder" :endPlaceholder="item.endPlaceholder"
                     v-model="formModal[item.filed]" :value="item.default" v-bind="item" />
        </el-form-item>
      </div>
      <slot />
      <el-form-item v-if="componentLoaded">
        <el-button size="small" type="primary" @click="search(1)" class="search-btn radiusbtn">查询</el-button>
        <el-button v-if="props.formJson.length && needReset" size="small" type="primary" plain class="radiusbtn"
                   @click="reset">重置</el-button>
        <el-button v-if="props.formJson.length > 4" type="text" @click="fold">{{ folding ? "展开" : "收起" }}</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";

.table-link {
  text-decoration-color: var(--v3-body-bg-color);
  color: var(--v3-body-bg-color);
}
</style>
